<template>
    <div class="root">
        <an-nav></an-nav>
        <div>
            <div style="margin-bottom: 10px">
                <el-button type="primary" @click="addDataFun">添加分类</el-button>
            </div>

            <el-table v-loading="loading" :data="pageData.list" stripe style="width: 100%" :height="clientWidth < 960?'calc(100vh - 220px)':'calc(100vh - 234px)'">
				
				<!-- 展开行 -->
				<el-table-column type="expand">
				    <template #default="props">
				       
						<!-- 插槽 -->
						<slot name="open" :data="props.row" :typelist="pageData.typeList"> 
<pre>
{{props.row}}
</pre>
				        </slot>
						
				        <!-- <div><span>标题: </span>{{ props.row.productName }}</div> -->
				    </template>
				</el-table-column>
				
                <el-table-column prop="type_id" label="分类ID" width="100"  align="center"> </el-table-column>
                <el-table-column prop="name" label="名称"> </el-table-column>
                
                <!-- 插槽 -->
                <slot :form="scope"></slot>
                <el-table-column prop="sort" label="排序" width="80" align="center"> </el-table-column>
				<el-table-column
                    align="center"
                    width="100"   
					label="状态" 
					:filters="[
						{ text: '显示', value: '1' },
						{ text: '隐藏', value: '0' },
					]"
					:filter-method="filterTag"
					filter-placement="bottom-end">
					<template #default="scope">
						<el-tag v-if="scope.row.a_show == '1'"  type="success">显示</el-tag>
						<el-tag v-else  type="info">隐藏</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="更新时间" width="180">
                    <template #default="scope">
                        {{time(scope.row.up_time,"yyyy-mm-dd hh:MM:ss")}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="110" fixed="right" align="center">
                    <template #default="scope">
                        <div class="flex">
                            <div>
								<el-button @click="editData(scope.row)" type="text" size="small"> 编辑</el-button>
							</div>
                            <div @click="delData(scope.row)">
								<el-button type="text" size="small">删除</el-button>	
							</div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
		
		<!-- 分页 -->
		<div class="c1">
			<el-pagination :small="clientWidth < 960"  background :default-page-size="searchData.limit" @size-change="switchSizeChange"
				@current-change="switchCurrentChange" v-model:currentPage="searchData.page" :pager-count="5"
				:layout="clientWidth < 960?'total,prev, pager, next':'total,prev, pager, next,sizes'" :page-sizes="[10, 20, 30, 40, 50, 100]" :total="pageData.total">
			</el-pagination>
		</div>
		
    </div>
	
    <el-dialog v-model="pageData.showForm" :title="pageData.isAdd?'添加分类':'编辑分类'" width="380px" center>
        <el-form label-width="110px" label-position="left" size="large">
            
            <!-- 父组件调用数据方式
            如：父组件需要使用子组件的 pageData.form.name字段
            <template #form="data">
                {{data.form.name}}
            </template> -->



            <el-form-item label="名称：">
                <el-input v-model.trim="pageData.form.name" placeholder="请输入分类名称"></el-input>
            </el-form-item>

            <el-form-item label="分类ID：">
                <el-input v-model.trim="pageData.form.type_id" type="number" placeholder="不能跟已有的分类ID重复"></el-input>
            </el-form-item>

            <!-- 具名插槽 作用域插槽 -->
            <slot name="form" :form="pageData.form"></slot>

            <el-form-item label="排序：">
                <el-input v-model.trim="pageData.form.sort" type="number" placeholder="数字越大排名越靠前，0最小"></el-input>
            </el-form-item>
			
			<el-form-item label="状态：">
				<el-radio v-model="pageData.form.a_show" label="1">
					显示
				</el-radio>
				<el-radio v-model="pageData.form.a_show" label="0">
					隐藏
				</el-radio>
			</el-form-item>

            

        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button  size="large" @click="pageData.showForm = false">取消</el-button>
                <el-button  size="large" type="primary" @click="subForm">确定</el-button>
            </span>
        </template>
    </el-dialog>
    
    </template>
    
    <script setup>
        import time from "@/utils/timeFormat.js";

        import publicJS from "@/hook/public.js";
        const {ElMessage,aTips,config,api} = publicJS();
        
		const clientWidth = ref(document.body.clientWidth);
		import useWindowSize from "@/hook/useWindowSize.js";
		useWindowSize(function(w,h){
			clientWidth.value = w;
		});
		

        const props = defineProps({
            type: {
                type:String,
                default:''
            },
        })
		
		// 获取列表 条件
		const searchData = reactive({
			keyWord: '',
			type: props.type,
			page: 1,
			limit: 20,
		})
		
		//筛选当前页数据的 状态
		const filterTag = (value, row)=> {
			return row.a_show === value
		}

        //页面数据
        const pageData = reactive({
            showForm:false,
            isAdd:true,
            list:[],
            form:config.typeForm,
			total:0
        })
		
		const loading = ref(false)
        const getList = ()=>{
			loading.value = true
            let url = 'a/common/type_list_data'
            if(props.type == 'family') url = 'a/family/get_family_list';
            api.post(url,searchData).then(res=>{
                pageData.list = res.data
                pageData.total = res.total
				loading.value = false
            })
        }
        getList();
        
        //删除数据
        const delData = (v)=>{
            aTips('确定删除 '+v.name+' 分类？',(e)=>{
                let url = 'api/common/type_del_data'
                if(props.type == 'family') url = 'api/family/type_del_data';
                api.post(url,{id:v.id,name:v.name}).then(r=>{
                    getList();
                }) 
            })
        }
    
        //新增类型
        const addDataFun = ()=>{
            pageData.showForm = true;
            pageData.isAdd = true;
        }

        //编辑数据
        const editData = (v)=>{
            pageData.isAdd = false;
            pageData.showForm = true;
            pageData.form = v;
        }
        
        //提交数据
        const subForm = ()=>{
            let url = 'api/common/type_add_data';
            if(pageData.isAdd == false)url = 'api/common/type_edit_data'
            api.post(url,{
                type:props.type,
                ...pageData.form,
            }).then(res=>{
                for(let i in pageData.form)pageData.form[i] = '';
                pageData.form.a_show = '1'
                pageData.showForm = false
                ElMessage.success('操作成功');
                getList()
            })
        }
    </script>
    <style scoped lang="scss">
        .root{
            .c1{margin-top: 10px;}
        }
    </style>
    
    